<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swipeList" :key="item.id" @click="tiaozhuan(item)">
        <img :src="item.img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 九宫格 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item @click="Jump('/newslist')">
        <img src="../assets/img/menu1.png" />
        <p>新闻资讯</p>
      </van-grid-item>
      <van-grid-item @click="Jump('/photo/list')">
        <img src="../assets/img/menu2.png" />
        <p>图片分享</p>
      </van-grid-item>
      <van-grid-item @click="Jump('/goods/list')">
        <img src="../assets/img/menu3.png" />
        <p>商品购买</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/img/menu4.png" />
        <p>留言反馈</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/img/menu5.png" />
        <p>视频专区</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/img/menu6.png" />
        <p>联系我们</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swipeList: []
    }
  },
  created() {
    this.getSwipe()
  },
  methods: {
    async getSwipe() {
      const { data: res } = await this.$http.get('/api/getlunbo')
      if (res.status !== 0) {
        return this.$toast.fail('获取轮播图错误!')
      }
      this.swipeList = res.message
    },
    tiaozhuan(item) {
      window.location.href = item.url
    },
    Jump(route) {
      this.$router.push(route)
    }
  }
}
</script>

<style lang="less" scoped>
.van-swipe {
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
.van-grid-item {
  width: 33.33333%;
  img {
    width: 50%;
  }
}
</style>
